<template>
  <a-input-search
      v-model:value="searchValue"
      placeholder="输入搜索单位"
      enter-button
      @search="onSearch"
  />
  <a-table :pagination="false" @expandedRowsChange="expandedRowsChange" :expandedRowKeys="expandedRowKeys" rowKey="id"
           :columns="columns"
           :data-source="data" :row-selection="rowSelection">
    <!--    <template #bodyCell="{ column, record }">-->
    <!--      <template v-if="column.key === 'action'">-->
    <!--        <span>-->
    <!--            <BangdingUserModal :deptItem="record" :eventItem="datas"/>-->
    <!--        </span>-->
    <!--      </template>-->
    <!--    </template>-->
  </a-table>
</template>

<script setup lang="ts">
import {ref, defineOptions, computed} from 'vue';
import {type TableListItem} from "./columns";
import {Api} from "@/api";
// import BangdingUserModal from './bangdingUserModal.vue'
import DeptEntity = API.DeptEntity;
import {message} from "ant-design-vue";

defineOptions({
  name: 'bandingModal',
});
const {datas} = defineProps({
  datas: {
    type: Object as PropType<TableListItem>,
  },
});

const columns = [
  // {
  //   title: 'ID',
  //   dataIndex: 'id',
  //   key: 'key',
  // },
  {
    title: '单位名称',
    dataIndex: 'name',
    key: 'name',
  },
  // {
  //   title: '操作',
  //   key: 'action',
  // },
];

let deptEntities = await Api.systemDept.deptList({});
const data = ref<DeptEntity[]>(deptEntities);
const searchValue = ref('');
const onSearch = (searchValue: string) => {
  if (!searchValue) {
    data.value = deptEntities
    return
  }
  let arr = []
  const item = (searchData: DeptEntity[]) => {
    if (searchData != null && searchData.length) {
      for (let searchDatum of searchData) {
        if (searchDatum.name == searchValue) {
          arr.push(searchDatum);
          break
        } else {
          item(searchDatum.children)
        }
      }
    }
  }
  item(deptEntities)
  data.value = arr
};
const bindingEvents = await Api.eventListServe.getBindingEvents({eventListId: datas.eventId});

const rowSelection = ref({
  selectedRowKeys: bindingEvents,
  hideDefaultSelections: true,
  checkStrictly: false,
  hideSelectAll: true,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DeptEntity[]) => {
    for (let selectedRowKey of selectedRowKeys) {
      if (selectedRowKey == 'wqQQjVWZa8gQMDE') {
        message.error('不能选择根节点');
        return
      }
    }
    let parameters = []
    selectedRows.forEach(ls => {
      parameters.push(ls.id)
    })
    Api.eventListServe.updateBindingEvents({
      eventListId: datas.eventId,
      deptId: parameters
    });
    rowSelection.value.selectedRowKeys = selectedRowKeys as string[]
  },
  onSelect: (record: DeptEntity, selected: boolean, selectedRows: DeptEntity[]) => {
    if (record.id == 'wqQQjVWZa8gQMDE') {
      return
    }
    // let parameters = []
    // selectedRows.forEach(ls => {
    //   parameters.push(ls.id)
    // })
    // if (selected) {
    //   selectedRows.forEach(ls => {
    //     parameters.push(ls.id)
    //   })
    // } else {
    //   //遍历所有的record并且拿到里面的递归children
    //   let arr = []
    //   debugger
    //   const item = (searchData: DeptEntity) => {
    //     if (searchData.children != null && searchData.children.length) {
    //       for (let searchDatum of searchData.children) {
    //         arr.push(searchDatum.id)
    //         item(searchDatum)
    //       }
    //     }
    //   }
    //   item(record)
    //   parameters = arr
    // }
    // Api.eventListServe.updateBindingEvents({
    //   eventListId: datas.eventId,
    //   deptId: parameters
    // });
    console.log('onSelect')
    console.log(record, selected, selectedRows);
  }
});

const expandedRowKeys = ref([])
let arr = []
deptEntities.length && deptEntities.forEach((item) => {
  if (item.children && item.children.length) {
    arr.push(item.id)
    item.children.forEach((item) => {
      arr.push(item.id)
    })
  }
})
expandedRowKeys.value = arr

const expandedRowsChange = (arr) => {
  expandedRowKeys.value = arr
}

</script>

<style></style>
  